<template>
  <div style="width: 100%; height: 100%">
    <VueUiDonut :dataset="dataset" :config="config">
      <template #svg="{ svg }">
        <foreignObject :x="0" :y="0" height="100" width="180">
          <div class="bg-gray-100 p-3 shadow">自定义模块插槽</div>
        </foreignObject>
        <foreignObject :x="0" :y="50" height="100" width="180">
          <div class="bg-gray-100 p-3 shadow">自定义模块插槽</div>
        </foreignObject>
      </template>
      
    <template #tooltip-before="{ datapoint, seriesindex, series, config }">
       这是自定义tooltip内容1
    </template>
    <template #tooltip-after="{ datapoint, seriesIndex, series, config }">
       这是自定义tooltip内容2
    </template>
      <!-- <template #legend="{ legend }"> ...your content here </template> -->
    </VueUiDonut>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VueUiDonut } from 'vue-data-ui';
const config = ref({
  responsive: true, // 是否缩放
  theme: '',
  customPalette: [],
  useCssAnimation: true,
  useBlurOnHover: true,
  userOptions: {
    show: false,
    buttons: { tooltip: true, pdf: true, csv: true, img: true, table: true, labels: true, fullscreen: true, sort: false, stack: false, animation: false },
    buttonTitles: {
      open: 'Open options',
      close: 'Close options',
      tooltip: 'Toggle tooltip',
      pdf: 'Download PDF',
      csv: 'Download CSV',
      img: 'Download PNG',
      table: 'Toggle table',
      labels: 'Toggle labels',
      fullscreen: 'Toggle fullscreen',
    },
  },
  translations: { total: 'Total', average: 'Average' },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: { backgroundColor: '#FFFFFF', color: '#1A1A1A', outline: 'none' },
    td: { backgroundColor: '#FFFFFF', color: '#1A1A1A', outline: 'none', roundingValue: 0, roundingPercentage: 0 },
    columnNames: { serie: 'Series', value: 'Value', percentage: 'Percentage' },
  },
  style: {
    fontFamily: 'inherit',
    chart: {
      useGradient: false,
      gradientIntensity: 40,
      backgroundColor: '#ffffff',
      color: '#1A1A1A',
      layout: {
        labels: {
          dataLabels: { show: false, useLabelSlots: false, hideUnderValue: 3, prefix: '', suffix: '' },
          value: { rounding: 0, show: true, formatter: null },
          percentage: { color: '#1A1A1A', bold: true, fontSize: 18, rounding: 0, formatter: null },
          name: { color: '#1A1A1A', bold: false, fontSize: 14 },
          hollow: {
            show: false,
            total: {
              show: false,
              bold: true,
              fontSize: 18,
              color: '#AAAAAA',
              text: 'Total',
              offsetY: 0,
              value: { color: '#1A1A1A', fontSize: 18, bold: true, suffix: '', prefix: '', offsetY: 0, rounding: 0, formatter: null },
            },
            average: {
              show: false,
              bold: false,
              fontSize: 18,
              color: '#AAAAAA',
              text: 'Average',
              offsetY: 0,
              value: { color: '#1A1A1A', fontSize: 18, bold: true, suffix: '', prefix: '', offsetY: 0, rounding: 0, formatter: null },
            },
          },
        },
        donut: { strokeWidth: '20', borderWidth: 1, useShadow: false, shadowColor: '#1A1A1A' },
      },
      comments: { show: true, showInTooltip: true, width: 100, offsetY: 0, offsetX: 0 },
      legend: { show: false, bold: false, backgroundColor: '#FFFFFF', color: '#1A1A1A', fontSize: 16, roundingValue: 0, roundingPercentage: 0 },
      tooltip: {
        show: true,
        color: '#1A1A1A',
        backgroundColor: '#FFFFFF',
        fontSize: 14,
        customFormat: null,
        borderRadius: 4,
        borderColor: '#e1e5e8',
        borderWidth: 1,
        backgroundOpacity: 100,
        position: 'center',
        offsetY: 24,
        showValue: true,
        showPercentage: true,
        roundingValue: 0,
        roundingPercentage: 0,
      },
    },
  },
});

const dataset = ref([
  { name: 'series 1', values: [30], color: '#1ded8f' },
  { name: 'series 2', values: [70], color: '#0021db' },
]);
</script>

<style lang="scss" scoped>
:deep(.vue-ui-donut) {
  padding: 0 !important;
}
</style>
